<!-- 2 -->
<script lang='ts' setup>
// @ts-nocheck
import { useRoute } from 'vue-router'
import { changeState, getDetailEx } from '@/api/request'
import { useGlobalStore } from '@/store/GlobalStore/index'
const store=useGlobalStore()
const route = useRoute()
const router=useRouter()
const name=store.userInfo.username
const rid = ref('')
const tid = ref('')
const sid = route.query.sid
const cid=store.userInfo.cid

const ws = new WebSocket(`ws://210.44.37.172:8082/message?id=${sid}&role=student`)
ws.onopen = function (e) {
	console.log('连接成功')
	// console.log('断开之前')
	// setTimeout(() => {
	// 	ws.close()
	// }, 3000)
	// console.log('断开了')
	// ws.send(
	// 	// '{"rid":"2002","tid":"3000","kid":"3000","value":"3.33","timeStamp":"3.2.3"}'
	// 	`{"role":"student","sourceId":"${sid}","eid":"3","rid":"${rid.value}","destId":"${tid.value}","kid":"k3","value":"3.33","timeStamp":"3.2.3"}`
	// )
}
ws.onmessage = function (e) {
	console.log(e.data, '接收返回的消息')
}
ws.onclose = function () {
	console.log('连接关闭')
}
ws.onerror = function () {
	console.log('连接出错')
}

onMounted(() => {
	console.log('组件挂载')

	rid.value = route.query.id
	tid.value = route.query.tid
	console.log('sid', sid, 'rid', rid.value, 'tid', tid.value)
	const jwtToken = localStorage.getItem('jwtToken')
	// 拿到保存的实验数据
	getDetailEx(jwtToken, 2, rid.value).then((res) => {
		console.log(res.data.data[0], 'socket数据')
		model.value.forEach((element) => {
			var obj = element
			var kid = obj.kid
			if (res.data.data[0].hasOwnProperty(kid)) {
				obj.value = res.data.data[0][kid]
				obj.timeStamp = res.data.data[0]['t' + kid]
			}
		})
	})
})
// 填每一个空的时间
const fillTime = ref([])
// 失去焦点时触发事件记录时间
const getTime = function (index) {
	model.value[index].timeStamp = new Date().toLocaleString()
	// 处理model数组的数据
	model.value = model.value.map((item) => ({
		role: 'student',
		sourceId: sid,
		rid: rid.value,
		destId: tid.value,
		eid: '2',
		kid: item.kid,
		// 返回这个对象中第一个属性的value值
		value: item.value,
		timeStamp: item.timeStamp,
        //ssssssssss:"ssssssssss"
	}))
	console.log('输出的', model.value)
	ws.send(
		// '{"rid":"2002","tid":"3000","kid":"3000","value":"3.33","timeStamp":"666666666"}'
		`${JSON.stringify(model.value[index])}`
	)
	console.log(model.value[index], '填的空')
}
// 提交
const apply = function () {
	// console.log('提交')
	// storage()
	model.value = model.value.map((item) => ({
		rid: rid.value,
		tid: tid.value,
		kid: Object.keys(item)[0],
		// 返回这个对象中第一个属性的value值
		value: item[Object.keys(item)[0]],

		timeStamp: item.timeStamp,
	}))
	changeState(jwtToken, rid, 1).then((res) => {
		console.log(res)
	})
	console.log(model.value, '提交成功')
	ElMessage.success('提交成功')
}
const model = ref([
    { kid: 'k1', value: '', timeStamp: '' },
    { kid: 'k2', value: '', timeStamp: '' },
    { kid: 'k3', value: '', timeStamp: '' },
    { kid: 'k4', value: '', timeStamp: '' },
    { kid: 'k5_1', value: '', timeStamp: '' },
    { kid: 'k5_2', value: '', timeStamp: '' },
    { kid: 'k5_3', value: '', timeStamp: '' },
    { kid: 'k5_4', value: '', timeStamp: '' },
    { kid: 'k5_5', value: '', timeStamp: '' },
    { kid: 'k5_6', value: '', timeStamp: '' },
    { kid: 'k5_7', value: '', timeStamp: '' },
    { kid: 'k6_1', value: '', timeStamp: '' },
    { kid: 'k6_2', value: '', timeStamp: '' },
    { kid: 'k6_3', value: '', timeStamp: '' },
    { kid: 'k6_4', value: '', timeStamp: '' },
    { kid: 'k6_5', value: '', timeStamp: '' },
    { kid: 'k6_6', value: '', timeStamp: '' },
    { kid: 'k6_7', value: '', timeStamp: '' },
    { kid: 'k7_1', value: '', timeStamp: '' },
    { kid: 'k7_2', value: '', timeStamp: '' },
    { kid: 'k7_3', value: '', timeStamp: '' },
    { kid: 'k7_4', value: '', timeStamp: '' },
    { kid: 'k7_5', value: '', timeStamp: '' },
    { kid: 'k7_6', value: '', timeStamp: '' },
    { kid: 'k7_7', value: '', timeStamp: '' },
    { kid: 'k8_1', value: '', timeStamp: '' },
    { kid: 'k8_2', value: '', timeStamp: '' },
    { kid: 'k8_3', value: '', timeStamp: '' },
    { kid: 'k8_4', value: '', timeStamp: '' },
    { kid: 'k8_5', value: '', timeStamp: '' },
    { kid: 'k8_6', value: '', timeStamp: '' },
    { kid: 'k8_7', value: '', timeStamp: '' },
    { kid: 'k9', value: '', timeStamp: '' },
    { kid: 'k10_1', value: '', timeStamp: '' },
    { kid: 'k10_2', value: '', timeStamp: '' },
    { kid: 'k10_3', value: '', timeStamp: '' },
    { kid: 'k10_4', value: '', timeStamp: '' },
    { kid: 'k11', value: '', timeStamp: '' },
    { kid: 'k12', value: '', timeStamp: '' },
    { kid: 'k13', value: '', timeStamp: '' },
    { kid: 'k14', value: '', timeStamp: '' },
    { kid: 'k15_1', value: '', timeStamp: '' },
    { kid: 'k15_2', value: '', timeStamp: '' },
    { kid: 'k15_3', value: '', timeStamp: '' },
    { kid: 'k16_1', value: '', timeStamp: '' },
    { kid: 'k16_2', value: '', timeStamp: '' },
    { kid: 'k16_3', value: '', timeStamp: '' },
    { kid: 'k17_1', value: '', timeStamp: '' },
    { kid: 'k17_2', value: '', timeStamp: '' },
    { kid: 'k17_3', value: '', timeStamp: '' },
    { kid: 'k17_4', value: '', timeStamp: '' },
    { kid: 'k18_1', value: '', timeStamp: '' },
    { kid: 'k18_2', value: '', timeStamp: '' },
    { kid: 'k18_3', value: '', timeStamp: '' },
    { kid: 'k19_1', value: '', timeStamp: '' },
    { kid: 'k19_2', value: '', timeStamp: '' },
    { kid: 'k19_3', value: '', timeStamp: '' },
    { kid: 'k20_1', value: '', timeStamp: '' },
    { kid: 'k20_2', value: '', timeStamp: '' },
    { kid: 'k20_3', value: '', timeStamp: '' },
    { kid: 'k20_4', value: '', timeStamp: '' },
    { kid: 'k21', value: '', timeStamp: '' },
    { kid: 'k22', value: '', timeStamp: '' },
    { kid: 'k23', value: '', timeStamp: '' },
    { kid: 'k24', value: '', timeStamp: '' },
])

</script>
<template>
    <div class="paper-wrap">
        <n-card>
            <!-- 学生信息 -->
            <div class="paper-title">
                <h2 style="font-size: 40px;">液体表面张力系数的测定</h2>
                <div class="stu-info">
                    <div class="stu-info-item">
                        <span>学号：</span>
                        <span>{{sid}}</span>
                    </div>
                    <div class="stu-info-item">
                        <span>姓名：</span>
                        <span>{{name}}</span>
                    </div>
                    <div class="stu-info-item">
                        <!-- <span>班级：</span>
                        <span>{{cid}}</span> -->
                    </div>
                </div>
            </div>
            <!-- 实验的基本信息 -->
            <n-divider title-placement="left">
                <h2>一、实验目的</h2>
            </n-divider>
            <div class="paper-purpose">
                <ol>
                    <li>
                        <el-input v-model="model[0].value" placeholder="第一条" @blur="getTime(0)"></el-input>
                    </li>
                    <li> <el-input v-model="model[1].value" placeholder="第二条" @blur="getTime(1)"></el-input> </li>
                    <li> <el-input v-model="model[2].value" placeholder="第三条" @blur="getTime(2)"></el-input> </li>
                </ol>
            </div>
            <n-divider title-placement="left">
                <h2>二、实验仪器</h2>
            </n-divider>
            <div class="paper-instrument">
                <el-input v-model="model[3].value" placeholder="请填写需要的实验仪器" @blur="getTime(3)"></el-input>
            </div>
            <n-divider title-placement="left">
                <h2>三、实验原理</h2>
            </n-divider>
            <div class="paper-principle">
                <p class="principles"> 写出实验基本原理级公式，并画出原理图 </p>
            </div>

            <n-divider title-placement="left">
                <h2>四、数据记录与处理</h2>
            </n-divider>
            <h3>（一）拉脱法测量表面张力系数</h3>
            <div class="paper-data">
                <!-- 第一个表单 -->
                <table border="1" cellpadding="2" style="
						width: 100%;
						border-collapse: collapse;
						border: 2px solid #000;
					" class="ntable">
                    <thead>
                        <tr>
                            <th colspan="2">测量序号</th>
                            <th>1</th>
                            <th>2</th>
                            <th>3</th>
                            <th>4</th>
                            <th>5</th>
                            <th>6</th>
                            <th>7</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td colspan="2" class="w-50 m-2">片码质量 m/g</td>
                            <td class="w-50 m-2">0.500</td>
                            <td class="w-50 m-2">1.000</td>
                            <td class="w-50 m-2">1.500</td>
                            <td class="w-50 m-2">2.000</td>
                            <td class="w-50 m-2">2.500</td>
                            <td class="w-50 m-2">3.000</td>
                            <td class="w-50 m-2">3.500</td>
                        </tr>
                        <tr>
                            <td colspan="2" class="w-50 m-2">片码重力 f=mg/(10<sup>-3</sup>N)</td>
                            <td class="w-50 m-2"><el-input v-model="model[4].value" class="w-50 m-2" @blur="getTime(4)" /></td>
                            <td class="w-50 m-2"><el-input v-model="model[5].value" class="w-50 m-2" @blur="getTime(5)" /></td>
                            <td class="w-50 m-2"><el-input v-model="model[6].value" class="w-50 m-2" @blur="getTime(6)" /></td>
                            <td class="w-50 m-2"><el-input v-model="model[7].value" class="w-50 m-2" @blur="getTime(7)" /></td>
                            <td class="w-50 m-2"><el-input v-model="model[8].value" class="w-50 m-2" @blur="getTime(8)" /></td>
                            <td class="w-50 m-2"><el-input v-model="model[9].value" class="w-50 m-2" @blur="getTime(9)" /></td>
                            <td class="w-50 m-2"><el-input v-model="model[10].value" class="w-50 m-2" @blur="getTime(10)" /></td>
                        </tr>
                        <tr>
                            <td rowspan="2" class="w-50 m-2" style="text-align: center;">输出电压<br>U/(10<sup>-3</sup>N)</td>
                            <td class="w-50 m-2">正向读数U<sub>1</sub>->U<sub>7</sub></td>
                            <td class="w-50 m-2"><el-input v-model="model[11].value" class="w-50 m-2" @blur="getTime(11)" /></td>
                            <td class="w-50 m-2"><el-input v-model="model[12].value" class="w-50 m-2" @blur="getTime(12)" /></td>
                            <td class="w-50 m-2"><el-input v-model="model[13].value" class="w-50 m-2" @blur="getTime(13)" /></td>
                            <td class="w-50 m-2"><el-input v-model="model[14].value" class="w-50 m-2" @blur="getTime(14)" /></td>
                            <td class="w-50 m-2"><el-input v-model="model[15].value" class="w-50 m-2" @blur="getTime(15)" /></td> 
                            <td class="w-50 m-2"><el-input v-model="model[16].value" class="w-50 m-2" @blur="getTime(16)" /></td> 
                            <td class="w-50 m-2"><el-input v-model="model[17].value" class="w-50 m-2" @blur="getTime(17)" /></td>                         
                        </tr>
                        <tr>
                            <td class="w-50 m-2">逆向读数U<sub>7</sub>->U<sub>1</sub></td>
                            <td class="w-50 m-2"><el-input v-model="model[18].value" class="w-50 m-2" @blur="getTime(18)" /></td>
                            <td class="w-50 m-2"><el-input v-model="model[19].value" class="w-50 m-2" @blur="getTime(19)" /></td>
                            <td class="w-50 m-2"><el-input v-model="model[20].value" class="w-50 m-2" @blur="getTime(20)" /></td>
                            <td class="w-50 m-2"><el-input v-model="model[21].value" class="w-50 m-2" @blur="getTime(21)" /></td>
                            <td class="w-50 m-2"><el-input v-model="model[22].value" class="w-50 m-2" @blur="getTime(22)" /></td>
                            <td class="w-50 m-2"><el-input v-model="model[23].value" class="w-50 m-2" @blur="getTime(23)" /></td>   
                            <td class="w-50 m-2"><el-input v-model="model[24].value" class="w-50 m-2" @blur="getTime(24)" /></td>                 
                        </tr>
                        <tr>
                            <td colspan="2" class="w-50 m-2">电压平均值U<sub>i</sub></td>
                            <td class="w-50 m-2"><el-input v-model="model[25].value" class="w-50 m-2" @blur="getTime(25)" /></td>  
                            <td class="w-50 m-2"><el-input v-model="model[26].value" class="w-50 m-2" @blur="getTime(26)" /></td>
                            <td class="w-50 m-2"><el-input v-model="model[27].value" class="w-50 m-2" @blur="getTime(27)" /></td>
                            <td class="w-50 m-2"><el-input v-model="model[28].value" class="w-50 m-2" @blur="getTime(28)" /></td>
                            <td class="w-50 m-2"><el-input v-model="model[29].value" class="w-50 m-2" @blur="getTime(29)" /></td>
                            <td class="w-50 m-2"><el-input v-model="model[30].value" class="w-50 m-2" @blur="getTime(30)" /></td>
                            <td class="w-50 m-2"><el-input v-model="model[31].value" class="w-50 m-2" @blur="getTime(31)" /></td>          
                        </tr>
                    </tbody>
                </table>
             <div>取g=10.0m·s<sup>-2</sup>,令x=f,y=U,按y=kx+a 对实验数据做线性回归分析,得回归系数(即力敏传感器的灵敏度) k=
                <span id="f2"><el-input v-model="model[32].value" class="w-10 m-2" @blur="getTime(32)"/></span>
                V·N<sup>-1</sup></div>
                <table border="1" cellpadding="2" style="
						width: 100%;
						border-collapse: collapse;
						border: 2px solid #000;
					" class="ntable">
                    <thead>
                        <tr>
                            <th>测量次数</th>
                            <th>1</th>
                            <th>2</th>
                            <th>3</th>
                            <th>平均值</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="w-50 m-2">U<sub>max</sub>/mV</td>
                            <td class="w-50 m-2"><el-input v-model="model[33].value" class="w-50 m-2" @blur="getTime(33)" /></td>
                            <td class="w-50 m-2"><el-input v-model="model[34].value" class="w-50 m-2" @blur="getTime(34)" /></td>
                            <td class="w-50 m-2"><el-input v-model="model[35].value" class="w-50 m-2" @blur="getTime(35)" /></td>
                            <td class="w-50 m-2"><el-input v-model="model[36].value" class="w-50 m-2" @blur="getTime(36)" /></td>
                        </tr>
            
                    </tbody>
                </table>
                <div>圆环内径d1=<span id="f2"><el-input v-model="model[37].value" class="w-10 m-2" @blur="getTime(37)"/></span>mm,
                    圆环外径d2=<span id="f2"><el-input v-model="model[38].value" class="w-10 m-2" @blur="getTime(38)"/></span>mm,
                    t=<span id="f2"><el-input v-model="model[39].value" class="w-10 m-2" @blur="getTime(39)"/></span>C</div>
                <div style="margin-top: 10px;">表面张力系数平均值a=<span id="f2"><el-input v-model="model[40].value" class="w-10 m-2" @blur="getTime(40)"/></span>N·m<sup>-1</sup></div>
            </div>
            <!-- 第二个表单 -->
            <h3>(二)毛细管法则测量表面张力系数</h3>
            <table border="1" cellpadding="2" style="
						width: 100%;
						border-collapse: collapse;
						border: 2px solid #000;
					" class="ntable">
                    <thead>
                        <tr>
                            <th>测量次数</th>
                            <th>1</th>
                            <th>2</th>
                            <th>3</th>
                            <th>平均值</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="w-50 m-2">水平面读数h1/mm</td>
                            <td class="w-50 m-2"><el-input v-model="model[41].value" class="w-50 m-2" @blur="getTime(41)" /></td>
                            <td class="w-50 m-2"><el-input v-model="model[42].value" class="w-50 m-2" @blur="getTime(42)" /></td>
                            <td class="w-50 m-2"><el-input v-model="model[43].value" class="w-50 m-2" @blur="getTime(43)" /></td>
                            <td class="w-50 m-2">/</td>
                        </tr>
                        <tr>
                            <td class="w-50 m-2">水柱顶点读数h2/mm</td>
                            <td class="w-50 m-2"><el-input v-model="model[44].value" class="w-50 m-2" @blur="getTime(44)" /></td>
                            <td class="w-50 m-2"><el-input v-model="model[45].value" class="w-50 m-2" @blur="getTime(45)" /></td>
                            <td class="w-50 m-2"><el-input v-model="model[46].value" class="w-50 m-2" @blur="getTime(46)" /></td>
                            <td class="w-50 m-2">/</td>
                        </tr>
                        <tr>
                            <td class="w-50 m-2">水柱高h=|h1-h2|/mm</td>
                            <td class="w-50 m-2"><el-input v-model="model[47].value" class="w-50 m-2" @blur="getTime(47)" /></td>
                            <td class="w-50 m-2"><el-input v-model="model[49].value" class="w-50 m-2" @blur="getTime(49)" /></td>
                            <td class="w-50 m-2"><el-input v-model="model[50].value" class="w-50 m-2" @blur="getTime(50)" /></td> 
                            <td class="w-50 m-2"><el-input v-model="model[51].value" class="w-50 m-2" @blur="getTime(51)" ></el-input></td>                        
                        </tr>
                        <tr>
                            <td class="w-50 m-2">内径初读数d1/mm</td>
                            <td class="w-50 m-2"><el-input v-model="model[52].value" class="w-50 m-2" @blur="getTime(52)" /></td>
                            <td class="w-50 m-2"><el-input v-model="model[53].value" class="w-50 m-2" @blur="getTime(53)" /></td>
                            <td class="w-50 m-2"><el-input v-model="model[54].value" class="w-50 m-2" @blur="getTime(54)" /></td>
                            <td class="w-50 m-2">/</td>                  
                        </tr>
                        <tr>
                            <td class="w-50 m-2">内径初读数d2/mm</td>
                            <td class="w-50 m-2"><el-input v-model="model[55].value" class="w-50 m-2" @blur="getTime(55)" /></td>
                            <td class="w-50 m-2"><el-input v-model="model[56].value" class="w-50 m-2" @blur="getTime(56)" /></td>
                            <td class="w-50 m-2"><el-input v-model="model[57].value" class="w-50 m-2" @blur="getTime(57)" /></td>
                            <td class="w-50 m-2">/</td>                  
                        </tr>
                        <tr>
                            <td class="w-50 m-2">内径d=|d1-d2|/mm</td>
                            <td class="w-50 m-2"><el-input v-model="model[58].value" class="w-50 m-2" @blur="getTime(58)" /></td>
                            <td class="w-50 m-2"><el-input v-model="model[59].value" class="w-50 m-2" @blur="getTime(59)" /></td>
                            <td class="w-50 m-2"><el-input v-model="model[60].value" class="w-50 m-2" @blur="getTime(60)" /></td>
                            <td class="w-50 m-2"><el-input v-model="model[61].value" class="w-50 m-2" @blur="getTime(61)" /></td>                  
                        </tr>
                        <tr>
                            <td class="w-50 m-2">表面张力系数平均值</td>
                            <td colspan="4" class="w-50 m-2">a=<span id="f2"><el-input v-model="model[62].value" class="w-50 m-2" @blur="getTime(62)" /></span>N·m<sup>-1</sup> </td>                
                        </tr>
                    </tbody>
                </table>
            <div>取ρ=10<sup>3</sup>kg·m<sup>-3</sup>,g=10.0m·s<sup>-2</sup>,θ=8°,cos8°=0.990,t=
                <span id="f2"><el-input v-model="model[63].value" class="w-50 m-2" @blur="getTime(63)" /></span>°C</div>
                
                <n-divider title-placement="left">
                    <h2>五、实验分析</h2>
            </n-divider>
            <div>实验过程中，毛细管内水柱的高度往往偏小，试分析其原因及对实验结果的影响</div>
                <el-input type="textarea" v-model="model[64].value" style="height: 100px" @blur="getTime(64)" resize='none'/>
            <div class="paper-analyze">
            </div>
            <div class="btn-group">
                <n-button type="info" @click="router.back()"> 保存并退出 </n-button>
                <router-link to="/">
                    <n-button type="success" @click="apply"> 提交 </n-button>
                </router-link>
            </div>
        </n-card>
    </div>
</template>

<style lang="scss" scoped>
.paper-title {
    .stu-info {
        display: flex;
        align-items: center;

        .stu-info-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 10px;
        }
    }
}
#firstul{
    li{
        margin-top: 10px;
    }
}
.ntable {
    margin: 10px;

    thead {
        background-color: #999;

        th {
            width: 100px;
            height: 50px;
            line-height: 50px;
            border: 2px solid black;
        }
    }

    tr {
        td {
            width: 100px;
            height: 50px;
            border: 2px solid black;
        }
    }
}

.paper-purpose {
    li {
        margin-top: 10px;
    }

}

.form1 {
    .form-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 10px;

        .input-group {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;

            .input {
                width: 100%;
            }
        }
    }
}
#f2 {
        display: inline-block;
        width: 100px;
        margin-right: 10px;
}
table {
    margin: 10px;

    tr {
        td {
            text-align: center;
            padding: 10px;

            input {
                width: 100%;
                height: 100%;
                //border: none;
                outline: none;
                text-align: center;
                box-sizing: border-box;

                &:focus {
                    border-radius: 5px;
                    border: 1px solid #000;
                }
            }
        }
    }
}

.btn-group {
    // 右下角
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    margin: 10px;

    .n-button {
        margin-left: 10px;
    }
}</style>